<template>
	<view class="mytime">
		<!-- 显示昵称 -->
		<view class="top-name">
			我是荒之叶
		</view>
		<!-- v3.0 -->
		<view class="title-v3">
			<text>他们说我变好了</text>
			<text>但我是变好了~</text>
		</view>
		<!-- v2.0 -->
		<view class="title-v2">
			<text>成功实现一次迭代!</text>
		</view>
		<!-- echarts图标 -->
		<view class="eche">
			<Myecharts></Myecharts>
		</view>
		<!-- echarts2图标 -->
		<view class="eche1">
			<Myecharts></Myecharts>
		</view>
		<!-- echarts2图标 -->
		<view class="eche2">
			<Myecharts></Myecharts>
		</view>
		<view class="title-v1">
			<text>正式面对自己!</text>
		</view>
		<!-- 中间竖线 -->
		<view class="middle-line">

		</view>
		<!-- 第一个版本 -->
		<view class="first-line">
			v3.0
		</view>
		<!-- 第二个版本 -->
		<view class="second-line">
			v2.0
		</view>
		<!-- 第三个版本 -->
		<view class="third-line">
			v1.0
		</view>
		<!-- 圈 -->
		<view class="first-time">2022.12</view>
		<view class="first-quan">

		</view>
		<view class="second-time">2021.10</view>
		<view class="second-quan">

		</view>
		<view class="third-time">2020.10</view>
		<view class="third-quan">
		</view>
		<!-- 最后2个按钮 -->
		<view class="first-btn">
			<image src="../../static/icons/升级3-线型.png"></image>
		</view>
		<view class="second-btn">
			<image src="../../static/icons/分享.png"></image>
		</view>

	</view>
</template>

<script>
	import Myecharts from '@/components/Myecharts.vue'
	export default {
		data() {
			return {

			}
		},
		components: {
			Myecharts
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mytime {
		width: 750rpx;
		height: 1400rpx;
		overflow: hidden;


		.top-name {
			width: 220rpx;
			height: 90rpx;
			margin: 0 auto;
			border-radius: 25rpx;
			font-weight: 550;
			background-color: #e99999;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
		}

		// 
		.title-v3 {
			width: 200rpx;
			height: 120rpx;
			font-size: 25rpx;
			display: flex;
			flex-direction: column;
			background-color: #9dc1d5;
			justify-content: center;
			line-height: 35rpx;
			text-align: center;
			border-radius: 25rpx;
			position: relative;
			left: 500rpx;
			top: 20rpx;
		}

		.title-v3::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			margin-top: -5px;
			border-width: 8px;
			border-style: solid;
			border-color: transparent #9dc1d5 transparent transparent;
		}

		.title-v2 {
			width: 210rpx;
			height: 120rpx;
			font-size: 25rpx;
			display: flex;
			flex-direction: column;
			background-color: #e99999;
			justify-content: center;
			flex-wrap: wrap;
			line-height: 35rpx;
			border-radius: 15rpx;
			position: relative;
			left: 30rpx;
			top: 150rpx;

		}

		.title-v2::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 100%;
			margin-top: -5px;
			border-width: 8px;
			border-style: solid;
			border-color: transparent transparent transparent #e99999;
		}

		.title-v1 {
			width: 210rpx;
			height: 120rpx;
			font-size: 25rpx;
			display: flex;
			flex-direction: column;
			background-color: #b4e3cf;
			justify-content: center;
			flex-wrap: wrap;
			text-align: center;
			line-height: 35rpx;
			border-radius: 15rpx;
			position: relative;
			left: 500rpx;
			top: -750rpx;

		}

		.title-v1::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			margin-top: -5px;
			border-width: 8px;
			border-style: solid;
			border-color: transparent #b4e3cf transparent transparent;
		}

		.eche {
			position: relative;
			top: -370rpx;
			left: -30rpx;
			width: 500rpx;
			height: 500rpx;
		}

		.eche1 {
			position: relative;
			top: -400rpx;
			left: -30rpx;
			width: 500rpx;
			height: 500rpx;
		}

		.eche2 {
			position: relative;
			top: -720rpx;
			left: 400rpx;
			width: 500rpx;
			height: 500rpx;
		}

		// 
		.middle-line {
			height: 1100rpx;
			width: 6rpx;
			position: absolute;
			background-color: #e99999;
			top: 100rpx;
			left: 370rpx;

		}

		.first-line {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			font-size: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 100rpx;
			left: 340rpx;
			background-color: #fff;
			border: 1px solid #ccc;
		}

		.first-time {
			width: 100rpx;
			position: absolute;
			top: 120rpx;
			font-size: 24rpx;
			color: #757575;
			left: 240rpx;
		}

		.second-time {
			width: 100rpx;
			position: absolute;
			top: 450rpx;
			font-size: 24rpx;
			color: #757575;
			left: 540rpx;
		}

		.third-time {
			width: 100rpx;
			position: absolute;
			top: 1150rpx;
			font-size: 24rpx;
			color: #757575;
			left: 230rpx;
		}


		.first-quan {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			position: absolute;
			top: 240rpx;
			left: 350rpx;
			background-color: #fff;
			border: 1px solid #ccc;
		}

		.second-quan {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			position: absolute;
			top: 650rpx;
			left: 350rpx;
			background-color: #fff;
			border: 1px solid #ccc;
		}

		.third-quan {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			position: absolute;
			top: 900rpx;
			left: 350rpx;
			background-color: #fff;
			border: 1px solid #ccc;
		}

		.second-line {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			font-size: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 530rpx;
			left: 340rpx;
			background-color: #fff;
			border: 1px solid #ccc;
		}

		.third-line {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			font-size: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 1137rpx;
			left: 340rpx;
			background-color: #fff;
			border: 1px solid #ccc;
		}

		.first-btn,
		.second-btn {
			width: 60rpx;
			height: 60rpx;
			left: 600rpx;
			top: 520rpx;
			border: 1rpx solid #e99999;
			position: absolute;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.second-btn {
			top: 610rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>
